<template>
	<view class="accelerate">
		<!-- <view class="flex_align_center ac_user">
			<image src="/static/user/info1.png"></image>
			<view class="clamp">这是一个昵称这是一个昵称</view>
		</view> -->
		<view class="ac_bg">
			<view class="ac_content">
				<view class="flex_between">
					<view class="ac_tit">加速补贴</view>
					<!-- <view class="ac_time">活动开始时间：2025/03/01</view> -->
				</view>
				<view class="flex_align_center ac_user">
					<image src="https://img.jinghushi.com/images/0/2025/03/Vz2Z8aJPP8Yaisj8kx8j7l8aA7pz77.png"></image>
					<view class="clamp">加速值</view>
				</view>
				<view class="ac_bar">
					<view class="ac_bar_active" :style="{width:info.curPer+'%'}"></view>
				</view>
				<view class="ac_value_list flex_around">
					<view class="ac_value">
						<view>{{info.cur}}</view>
						<view>当前积分</view>
					</view>
					<view class="ac_value">
						<view>{{info.nextCurNum}}积分</view>
						<view>距下个加速值还差</view>
					</view>
					<view class="ac_value">
						<view>{{info.curNum}}</view>
						<view>加速值</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ac-header">
			<text>活动说明</text>
		</view>
		<view class="ac_rule">{{rule.remark[0]}}</view>
		<view class="ac-header">
			<text>等级规则</text>
		</view>
		<view class="ac_rule">
			<view class="flex_between" v-for="(item,index) in rule.rule">
				<view>{{item}}</view>
				<view class="ac_speed">{{index}} 加速值</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [],
				rule: [],
				width: 20
			};
		},
		onLoad() {
			this.getInfo();
			this.getRule();
		},
		methods: {
			getInfo(){
				this.$axios('salespeed/mains','POST','sale').then(res=>{
					if(res.data.code == 200){
						this.info = res.data.data;
					}
				})
			},
			getRule(){
				this.$axios('salespeed/info','POST','sale').then(res=>{
					if(res.data.code == 200){
						this.rule = res.data.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f8f8fe;
		padding-bottom: 40rpx;
	}
	.ac_bg{
		padding: 10rpx 20rpx 20rpx;
		background: linear-gradient( 180deg, #4B05A7 0%, #8615E1 40%, #f8f8fe 100%);
		padding-bottom: 40rpx;
	}
.ac_content{
	border: 2rpx solid #eee;
	padding: 20rpx;
	background: #fff;
	border-radius: 12rpx;
	color: #450e9f;
	.ac_tit{
		font-size: 30rpx;
		font-weight: bold;
		background: #480fac;
		padding: 4rpx 26rpx;
		border-radius: 30rpx;
		color: #fff;
	}
	.ac_time{
		font-size: 24rpx;
		font-weight: bold;
	}
	.ac_user{
		margin-top: 20rpx;
		image{
			border-radius: 0;
			width: 42rpx;
			height: 44rpx;
			margin-right: 20rpx;
		}
	}
	.ac_bar{
		top: 16rpx;
		background: #eee;
		width: 100%;
		height: 4rpx;
		position: relative;
		z-index: 1;
		.ac_bar_active{
			position: absolute;
			background: #2c009e;
			left: 0;
			top: -50%;
			height: 6rpx;
			z-index: 2;
			width: 50%;
		}
	}
	.ac_value_list{
		text-align: center;
		margin-top: 50rpx;
		font-weight: bold;
		.ac_value{
			width: 33%;
			white-space: nowrap;
		}
	}
}
.ac-header {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80rpx;
	font-size: 28rpx;
	color: $font-color-dark;
	position: relative;
	margin-top: 10rpx;
	text {
		padding: 0 20rpx;
		background: #f8f8fe;
		position: relative;
		z-index: 1;
		color: #2c009e;
	}
	&:after {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%);
		width: 400rpx;
		height: 0;
		content: '';
		border-bottom: 1px solid #2c009e;
	}
}
.ac_rule{
	padding: 20rpx;
	margin: 0 20rpx;
	background: #fff;
	line-height: 44rpx;
	border-radius: 12rpx;
	color: #666;
	.flex_between{
		border-bottom: 2rpx solid #eee;
		margin-bottom: 6rpx;
		letter-spacing: 2rpx;
		&:last-child{
			border-bottom: none;
		}
	}
	.ac_speed{
		color: #2c009e;
		font-weight: bold;
		line-height: 2;
	}
}
</style>
